import React from "react"
import { inject, observer } from "mobx-react"
import { AuthorityHeader } from "../header"
import { Input, AntdButton, Captcha, Modal } from "../../../components"
import { Tip } from "../tip"
import "./forget-password.scss"
import { images } from "../../../assets"

interface IForgetPasswordProps {
  rootStore?: any
  history?: any
}

@inject("rootStore")
@observer
export class ForgetPassword extends React.Component<IForgetPasswordProps, {}> {
  render() {
    const { loginStore } = this.props.rootStore
    return (
      <div className="forget-password">
        {AuthorityHeader({ title: "忘记密码" })}
        {loginStore.forgetStep !== 2 ? (
          <Tip title="输入您的用户名>接受验证码>修改密码" />
        ) : (
          <Tip title={`验证码已发送到您的手机号: +${loginStore.userMobile}`} />
        )}
        <div className="forget-password-content">
          {loginStore.forgetStep === 0 ? (
            <Input
              leftIcon={images.login.icons.logInUser}
              isOpenClear={loginStore.forgetUsernameOpenClear}
              clear={loginStore.forgetUsernameClear}
              placeholder="请输入您的手机号/用户名"
              value={loginStore.forgetUsername}
              onChange={e => loginStore.forgetUsernameOnChange(e.target.value)}
            />
          ) : null}
          {loginStore.forgetStep === 1 ? (
            <div className="send-msg-code-confirm">
              <div className="out-circlle">
                <div className="inside-circle"></div>
              </div>

              <div className="mobile-msg">
                <div className="title">将验证码发送到绑定的手机号码</div>
                <div className="mobile">+{loginStore.userMobile}</div>
              </div>
            </div>
          ) : null}
          {loginStore.forgetStep === 2 ? (
            <div>
              <Input
                isMsgInput
                msgCodeText="重新发送"
                leftIcon={images.login.icons.logInVerification}
                isOpenClear={loginStore.verificationOpenClear}
                clear={loginStore.verificationClear}
                placeholder="请输入您收到的验证码"
                value={loginStore.verification}
                onChange={e => loginStore.verificationOnChange(e.target.value)}
                sendMsg={loginStore.sendForgetCode}
              />
              <Input
                isPassword
                leftIcon={images.login.icons.password}
                placeholder="输入8~20个字母及数字组成的密码"
                isOpenClear={loginStore.passwordOpenClear}
                value={loginStore.password}
                clear={loginStore.passwordClear}
                onChange={(e: any) => loginStore.passwordOnChange(e.target.value)}
                isPasswordOpen={loginStore.isPasswordOpen}
                changePasswordStyle={loginStore.changePasswordStyle}
              />
              <Input
                isPassword
                leftIcon={images.login.icons.password}
                placeholder="输入8~20个字母及数字组成的密码"
                isOpenClear={loginStore.confirmPasswordOpenClear}
                value={loginStore.confirmPassword}
                clear={loginStore.confirmPasswordClear}
                onChange={(e: any) => loginStore.confirmPasswordOnChange(e.target.value)}
                isPasswordOpen={loginStore.isConfirmPasswordOpen}
                changePasswordStyle={loginStore.changeConfirmPasswordStyle}
              />
            </div>
          ) : null}
          {loginStore.forgetStep !== 2 ? (
            <AntdButton className="forget-btn" onClick={loginStore.forgetStepOnChange}>
              下一步
            </AntdButton>
          ) : (
            <AntdButton
              className="forget-btn"
              onClick={() => loginStore.resetPassword(this.props.history)}
            >
              确认
            </AntdButton>
          )}
        </div>
        <Captcha
          showCaptcha={loginStore.showCaptcha}
          captchaClose={loginStore.captchaClose}
          callback={(err: any, data: any) => loginStore.forgetPasswordCallback(err, data)}
        />
        {console.log(loginStore.showErrModal)}
        {loginStore.showErrorModal ? (
          <Modal
            modalText="您还没有绑定手机和电子邮箱?"
            modalSubText="请立即联系在线客服"
            closeErrorModal={loginStore.closeErrorModal}
          />
        ) : null}
      </div>
    )
  }
}
